<template>


	<section>

		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">


			<el-form :inline="true" :model="search">
				<el-form-item>
					<el-input v-model="search.name" placeholder="订单名称"></el-input>

				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getCustomerOrderList">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="addCustomerOrder">新增</el-button>
				</el-form-item>
				<el-form-item>

				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="customerOrderList" highlight-current-row v-loading="listLoading" style="width: 100%;">


			<el-table-column prop="name" label="图片" width="100">
				<template scope="scope">
					<img class='listImg' :src='scope.row.imgUrl'>
				</template>
			</el-table-column>
			<el-table-column width="60">
				<template scope="scope">

					<el-popover ref="popover5" placement="right" width="500px" v-model="scope.row.show">
						<div v-if="scope.row.show">
							<customerOrderShow :customerOrderId="scope.row._id"></customerOrderShow>
						</div>
					</el-popover>

					<el-button size="small" v-popover:popover5><i class="fa fa-eye"></i></el-button>

				</template>
			</el-table-column>
			<el-table-column prop="name" label="订单标题">


				<template scope="scope">
					<div>
						<h3>编号:{{scope.row.code}}</h3>
						<h3>样衣款号:{{getModelNo(scope.row).proof}}</h3>
						<h3>大货款号:{{getModelNo(scope.row).bulk}}</h3>
						<h3>订单名称:{{scope.row.name}} </h3>
					</div>
				</template>

			</el-table-column>
			<el-table-column prop="name" label="单据">
				<template scope="scope">

					<div v-if="scope.row.openProof" >

						<el-button size="mini" type="text" @click='toOfferPrint(scope.row._id,"proof")'>样衣报价单</el-button>
					</div>
					<div v-if="scope.row.openProof" >
				
						<el-button size="mini" type="text" @click='toTechnologyPrint(scope.row._id,"proof")'>样衣工艺单</el-button>
					</div>
					<div v-if="scope.row.openBulk" >
				
						<el-button size="mini" type="text" @click='toOfferPrint(scope.row._id,"bulk")'>大货报价单</el-button>
					</div>
					<div v-if="scope.row.openBulk" >
			

						<el-button size="mini" type="text" @click='toTechnologyPrint(scope.row._id,"bulk")'>大货工艺单</el-button>
					</div>

				</template>
			</el-table-column>
			<el-table-column label="样衣数量" width="100">
				<template scope="scope">
					<span v-text="countItemData(scope.row.proof).num"></span>

				</template>
			</el-table-column>
			<el-table-column label="大货数量" width="200">
				<template scope="scope">
					<span v-text="countItemData(scope.row.bulk).num"></span>

				</template>
			</el-table-column>
			<el-table-column label="销售负责人" width="120">
				<template scope="scope">
					<span v-text="getSalesMembers(scope.row.salesMembers)"></span>

				</template>
			</el-table-column>

			<!--<el-table-column label="打样" min-width="180" prop='createTime' :formatter="fmtDate">

			</el-table-column>
			<el-table-column label="大货" min-width="180" prop='createTime' :formatter="fmtDate">

			</el-table-column>-->
			<el-table-column label="操作" width="80">
				<template scope="scope">
					<el-button size="small" @click="toSaveCustomerOrder(scope.row)">编辑</el-button>
				</template>
			</el-table-column>

		</el-table>

		<!--分页-->
		<el-col :span="24" class="toolbar">


			<el-pagination layout="prev, pager, next" @current-change="getCustomerOrderList" :page-size="20" :total="totalPage" style="float:right;">
			</el-pagination>
		</el-col>

		<!--编辑-->
		<el-dialog title="编辑订单" v-model="ShowSave" :close-on-click-modal="false" size='large' @open='getCustomerOrder()'>

			<el-tabs v-model="currTab" value='1' @tab-click='orderTabSel'>

				<!--订单信息开始-->




				<el-tab-pane label="基础信息" name="1">
					<el-form :model="currObj" label-width="90px" ref="currObj">
						<el-form-item label="订单标题" prop="name">
							<el-input v-model="currObj.name" auto-complete="off"></el-input>
						</el-form-item>
						<el-form-item label="客户信息" prop="customerId">
							<el-autocomplete value='' :fetch-suggestions="getCustomer" placeholder="请输入拼音简码" @select="selCustomer"></el-autocomplete>
							<el-tag v-if="currObj.customerName" type="gray">{{currObj.customerName}}</el-tag>
						</el-form-item>
						<el-form-item label="合同编号">
							<el-autocomplete :fetch-suggestions="querySearchContract" placeholder="编号,名称,拼音简码" @select="selContract"></el-autocomplete>

							<el-tag type="success" v-if="currObj.contractInfo">
								{{currObj.contractInfo.name}}
							</el-tag>

						</el-form-item>
						<el-form-item label="销售负责人">
							<el-autocomplete :fetch-suggestions="querySearchMember" placeholder="请输入内容" @select="selSalesMember"></el-autocomplete>
							<el-tag :key='member.id' v-for="member in  currObj.salesMembers" :closable="true" type="success" @close="handleClose(member,currObj.salesMembers)">
								{{member.name}}
							</el-tag>
						</el-form-item>
						<el-form-item label="计量单位">
							<el-select placeholder="请选择" v-model='currObj.unitId'>
								<el-option v-for="unit in getUnitArray()" :label="unit.name" :value="unit.id">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="服装分类" prop="classId">
							<el-select placeholder="请选择" v-model='currObj.classId'>
								<el-option-group v-for="type in clothesSizeTypeArray" :label="type.typeName" :value="type.typeId">
									<el-option v-for="cls in type.classArray" :label="cls.className" :value="cls.classId">
									</el-option>
								</el-option-group>
							</el-select>
						</el-form-item>
						<el-form-item label="打样">
							<el-switch v-model="currObj.openProof" @change='openProof' on-color="#13ce66" off-color="#ff4949">
							</el-switch>
						</el-form-item>
						<el-form-item label="大货">
							<el-switch v-model="currObj.openBulk" @change='openBulk' on-color="#13ce66" off-color="#ff4949">
							</el-switch>
						</el-form-item>
						<el-form-item label="订单附件">
							<file v-on:callBack="fileUp"></file>
							<!--<el-upload action="/file" :show-file-list='false' :on-change='fileChange' :on-preview="handlePreview" :on-success="fileUp"
							 :on-remove="fileRemove" :file-list="currObj.fileList" list-type="picture" drag multiple>
								<i class="el-icon-upload"></i>
								<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
								<div class="el-upload__tip" slot="tip">只能上传jpg/jpeg/png/gif文件，且不超过500kb</div>
							</el-upload>-->
						</el-form-item>
						<!--附件-->
						<el-form-item label="附件列表">
							<imgSel :fileList.sync="currObj.fileList" v-on:selFile="selFile"></imgSel>
						</el-form-item>
					</el-form>
				</el-tab-pane>
				<!--打样详情-->
				<el-tab-pane key="打样详情" label="打样详情" name="2" v-if="currObj.openProof">

					<colorSizeData :currObj="currObj" dataType="proof"></colorSizeData>
				</el-tab-pane>


				<!--打样流程-->
				<el-tab-pane label="打样流程" name="3" v-if="currObj.openProof">
					<flowNodeList ref='proofFlowNodeList' s='customerOrder' :taskList='taskList' :currObj='currObj.flow.proof' :customerOrder='currObj'
					 v-on:toSaveTask="toSaveTask" :currNodeObj='currNodeObj' v-on:toSaveNode="toSaveNode" v-on:exeCustomerOrderFlow="exeCustomerOrderFlow"></flowNodeList>
				</el-tab-pane>


				<!--大货详情-->
				<el-tab-pane label="大货详情" name="4" v-if="currObj.openBulk">

					<colorSizeData :currObj="currObj" dataType="bulk"></colorSizeData>
				</el-tab-pane>

				<el-tab-pane label="大货流程" name="5" v-if="currObj.openBulk">
					<flowNodeList ref='bulkFlowNodeList' s='customerOrder' :taskList='taskList' :currObj='currObj.flow.bulk' :customerOrder='currObj'
					 v-on:toSaveTask="toSaveTask" :currNodeObj='currNodeObj' v-on:toSaveNode="toSaveNode" v-on:exeCustomerOrderFlow="exeCustomerOrderFlow"></flowNodeList>
				</el-tab-pane>

			</el-tabs>




			<div slot="footer" class="dialog-footer">

				<el-button @click.native="shuaxinOrder"><i class="fa fa-refresh fa-spin"></i> 刷新</el-button>
				<el-button @click.native="ShowSave = false">取消</el-button>
				<el-button type="primary" @click.native="saveCustomerOrder">提交</el-button>
			</div>
		</el-dialog>

		<el-dialog title="编辑任务" :visible.sync="showTaskInfo" :model='showTaskInfo' size="large">
			<taskInfo v-on:afterSaveTask="afterSaveTask" ref='taskInfo' :showTaskInfo='showTaskInfo' :currObj='task'></taskInfo>

			<div slot="footer" class="dialog-footer">
				<el-button @click.native="showTaskInfo = false">取消</el-button>
				<el-button type="primary" @click.native="$refs.taskInfo.saveTask()">提交</el-button>
			</div>
		</el-dialog>

		<el-dialog title="编辑节点" v-model="ShowSaveNode" :close-on-click-modal="false">

			<div slot="footer" class="dialog-footer">

				<el-button @click.native="ShowSaveNode = false">取消</el-button>
				<el-button type="primary" @click.native="saveNode" :loading="editLoading">保存节点</el-button>
			</div>
			<flowNode :currObj='currFlow' :currNodeObj='currNodeObj' :ShowSaveNode='ShowSaveNode' v-on:addNodeMember="addNodeMember"
			 v-on:removeNodeMember="removeNodeMember" :editLoading='editLoading'>
			</flowNode>
		</el-dialog>
		<el-dialog title="报价单" :visible.sync="showOfferPrint" :model='showOfferPrint' size="large" :show-close='false' top='10px'>
			<offerPrint ref='offerPrint' v-if="showOfferPrint" :flowClassId='currFlowClassId' :customerOrderId='currCustomerOrderId'></offerPrint>

			<div slot="title">

				<el-button type="primary" @click.native="$refs.offerPrint.printPage()"><i class="fa fa-print"></i> 打印</el-button>
				<el-button @click.native="showOfferPrint = false">关闭(esc)</el-button>
			</div>
		</el-dialog>

		<el-dialog title="工艺单" :visible.sync="showTechnologyPrint" :model='showTechnologyPrint' size="large" :show-close='false' top='10px'>
			<technologyPrint ref='technologyPrint' v-if="showTechnologyPrint" :flowClassId='currFlowClassId' :customerOrderId='currCustomerOrderId'></technologyPrint>

			<div slot="title">

				<el-button type="primary" @click.native="$refs.technologyPrint.printPage()"><i class="fa fa-print"></i> 打印</el-button>
				<el-button @click.native="showTechnologyPrint = false">关闭(esc)</el-button>
			</div>
		</el-dialog>
	</section>
</template>
<script src="./customerOrderList.js"></script>

<style lang="scss" scoped>
	.card {
		margin-right: 10px;
		margin-bottom: 10px;
	}

	.btn_1 {}

	.listImg {

		width: 50px;
		height: 50px;
		margin-top: 5px;
	}

	h3 {
		font-weight: normal;
		font-size: 13px;
		line-height: 20px;
		margin: 5px 0 5px 0
	}

	.el-button--text {
		margin: 0 0 0 0;
	}
</style>